import React from 'react';
import { Link } from 'react-router-dom';
import Axios from 'axios';
import { apiPrefix } from 'shared/api';
import './index.less';

export default class PayStructure extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      salaries: [],
      queryMessage: {},
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}wdy_wage/api/v1/wage/salaries`;
    Axios.get(api)
      .then((response) => {
        this.setState({ salaries: response.data.data });
      });
  }
  render() {
    const { salaries, queryMessage } = this.state;
    console.log(salaries);
    return (
      <div className="content">
        <div>
          <h3>
            薪酬结构管理
            <Link to="/PayStructureForm" className="addButton">添加薪酬结构</Link>
          </h3>
          <table>
            <thead>
              <tr>
                <th className="w50">序号</th>
                <th className="w120">工资档位名称</th>
                <th className="w50">岗位工资(元)</th>
                <th className="w50">双休加班工资(元/天)</th>
                <th className="w50">日常加班工资(元/天)</th>
                <th className="w50">节假日加班工资(元/天)</th>
                <th className="w50">补贴(元/天)</th>
                <th className="w50">防暑降温/烤火(元/天)</th>
                <th className="w50">奖金(元)</th>
                <th>备注</th>
                <th className="w80" />
              </tr>
              <tr className="query-input">
                <th>查询</th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
                <th>
                  <input
                    type="text"
                    value={queryMessage.name}
                    onChange={this.handlOnChange}
                  />
                </th>
              </tr>
            </thead>
            <tbody>
              {
                salaries.map((value, index) => (
                  <tr key={index}>
                    <td>{index + 1}</td>
                    <td>{value.name}</td>
                    <td>{value.job_salary}</td>
                    <td>{value.overtime_weeked.toFixed(2)}</td>
                    <td>{value.overtime_daily.toFixed(2)}</td>
                    <td>{value.overtime_holiday.toFixed(2)}</td>
                    <td>{value.subsidy}</td>
                    <td>{value.subsidy_out}</td>
                    <td>{value.bonus}</td>
                    <td>{value.descr}</td>
                    <td><Link to={`/PayStructureForm/${value.id}`} className="sure-button">编辑</Link></td>
                  </tr>
                ))
              }
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
